<template>
  <div class="message-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <img @click="settings" style="float:right;" width="35px"
           src="http://srhtngjmu.hn-bkt.clouddn.com/wanmai/%E8%AE%BE%E7%BD%AE%E6%8C%89%E9%92%AE.png"/>
      <h1 style="font-size: 24px;width: 50px;">我的</h1>
    </div>

    <div
        style="width: 90%;background-color: #2984f8;height: 130px;border-radius: 10px;padding: 20px;position: relative">
      <el-row class="demo-avatar demo-basic" style="float:left;">
        <el-col :span="12">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar shape="square" :size="75" :src="user.imageUrl"></el-avatar>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100%;height: 75px;">
        <div align="left" style="color: white;margin-top: 5px">
          <span style="margin-left: 10px;font-size: 25px;">{{ user.realName }}</span>
<!--          <span v-if="user.relationToSelf"-->
<!--                style="margin-left: 10px;background-color: #fa746b;padding: 3px 10px;border-radius: 50px;font-size: 14px">{{user.relationToSelf}}</span>-->
          <span v-if="user.agency=='已签约'"
                style="margin-left: 10px;background-color: #28d094;padding: 3px 10px;border-radius: 50px;font-size: 14px;">{{ user.agency }}</span>
          <span v-if="user.agency=='未签约'"
                style="margin-left: 10px;background-color: #ee7c77;padding: 3px 10px;border-radius: 50px;font-size: 14px;">{{ user.agency }}</span>
        </div>
        <div align="left" style="color: white;margin-top: 5px">
          <span v-if="user.gender" style="margin-left: 10px;">{{ user.gender }}</span>
          <span v-if="user.age" style="margin-left: 10px;">{{ user.age }}岁</span>
        </div>
      </div>
      <el-button @click="improveInformation" style="border-radius: 50px;position: absolute;bottom: 20px;right: 20px;color: #2984f8">
        完善用户信息
      </el-button>
    </div>
    <van-cell-group align="left" style="margin-top: 20px">
      <van-cell @click="qianyuejilu"
                style="height: 70px;font-size: 20px;border-bottom: 1px solid rgba(0,0,0,0.2);border-top: 1px solid rgba(0,0,0,0.2);"
                title="签约记录" is-link center>
        <template #right-icon>
          <van-icon name="arrow"/>
        </template>
        <template #icon>
          <span
              style="background-color: rgba(41,132,248,0.2);width: 40px;height: 40px;margin-right: 10px;text-align: center;border-radius: 10px">
            <img width="30px" style="margin-top: 4px;"
                 src="http://srhtngjmu.hn-bkt.clouddn.com/my/%E7%AD%BE%E7%BA%A6%E8%AE%B0%E5%BD%95.png"/>
          </span>
        </template>
      </van-cell>
      <van-cell @click="wodejiankangdangan"
                style="height: 70px;font-size: 20px;border-bottom: 1px solid rgba(0,0,0,0.2);" title="我的健康档案"
                is-link center>
        <template #right-icon>
          <van-icon name="arrow"/>
        </template>
        <template #icon>
          <span
              style="background-color: rgba(253,219,120,0.2);width: 40px;height: 40px;margin-right: 10px;text-align: center;border-radius: 10px">
            <img width="30px" style="margin-top: 6px;margin-left: 3px"
                 src="http://srhtngjmu.hn-bkt.clouddn.com/my/%E6%88%91%E7%9A%84%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%881.png"/>
          </span>
        </template>
      </van-cell>
      <van-cell @click="wodejiankangjiance"
                style="height: 70px;font-size: 20px;border-bottom: 1px solid rgba(0,0,0,0.2);" title="我的健康监测"
                is-link center>
        <template #right-icon>
          <van-icon name="arrow"/>
        </template>
        <template #icon>
          <span
              style="background-color: rgba(108,118,244,0.2);width: 40px;height: 40px;margin-right: 10px;text-align: center;border-radius: 10px">
            <img width="30px" style="margin-top: 7px;"
                 src="http://srhtngjmu.hn-bkt.clouddn.com/my/%E6%88%91%E7%9A%84%E5%81%A5%E5%BA%B7%E6%A3%80%E6%B5%8B.png"/>
          </span>
        </template>
      </van-cell>
      <van-cell @click="wodeyishengtuandui"
                style="height: 70px;font-size: 20px;border-bottom: 1px solid rgba(0,0,0,0.2);" title="我的医生团队"
                is-link center>
        <template #right-icon>
          <van-icon name="arrow"/>
        </template>
        <template #icon>
          <span
              style="background-color: rgba(40,208,148,0.2);width: 40px;height: 40px;margin-right: 10px;text-align: center;border-radius: 10px">
            <img width="30px" style="margin-top: 4px;"
                 src="http://srhtngjmu.hn-bkt.clouddn.com/my/%E6%88%91%E7%9A%84%E5%8C%BB%E7%94%9F%E5%9B%A2%E9%98%9F.png"/>
          </span>
        </template>
      </van-cell>
      <van-cell @click="wodefuwubao" style="height: 70px;font-size: 20px;border-bottom: 1px solid rgba(0,0,0,0.2);"
                title="我的服务包" is-link center>
        <template #right-icon>
          <van-icon name="arrow"/>
        </template>
        <template #icon>
          <span
              style="background-color: rgba(41,132,248,0.2);width: 40px;height: 40px;margin-right: 10px;text-align: center;border-radius: 10px">
            <img width="30px" style="margin-top: 6px;"
                 src="http://srhtngjmu.hn-bkt.clouddn.com/my/%E6%88%91%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%8C%85.png"/>
          </span>
        </template>
      </van-cell>
      <van-cell @click="wodeshoucang" style="height: 70px;font-size: 20px;border-bottom: 1px solid rgba(0,0,0,0.2);"
                title="我的收藏" is-link center>
        <template #right-icon>
          <van-icon name="arrow"/>
        </template>
        <template #icon>
          <span
              style="background-color: rgba(253,219,120,0.2);width: 40px;height: 40px;margin-right: 10px;text-align: center;border-radius: 10px">
            <img width="30px" style="margin-top: 6px;margin-right: 2px"
                 src="http://srhtngjmu.hn-bkt.clouddn.com/my/%E6%88%91%E7%9A%84%E6%94%B6%E8%97%8F.png"/>
          </span>
        </template>
      </van-cell>

    </van-cell-group>

    <van-tabbar v-model="activeName">
      <van-tabbar-item icon="wap-home-o" @click="tiaozhuan(activeName)">首页</van-tabbar-item>
      <van-tabbar-item icon="comment" @click="tiaozhuan(activeName)">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="tiaozhuan(activeName)">我的</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>
export default {
  name: 'MyView',
  data() {
    return {
      activeName: 2,
      user: {
        realName: "",
        gender: '',
        age: '',
        relationToSelf: '',
        agency: '',
        imageUrl: 'http://srhtngjmu.hn-bkt.clouddn.com/wanmai/%E7%94%A8%E6%88%B7%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png',
      }
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      });
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
    this.getUserInfo()
  },
  methods: {
    improveInformation(){
      this.$router.push({name:'improveInformation'})
    },
    settings() {
      this.$router.push({name: 'settings'})
    },
    qianyuejilu() {
      this.$router.push({name: 'agencyRecord'})
    },
    wodejiankangdangan() {
      this.$router.push({name: 'myHealthRecord', query: {imageUrl: this.user.imageUrl}})
    },
    wodejiankangjiance() {
      this.$router.push({name: 'healthIndex'})
    },
    wodeyishengtuandui() {
      this.$router.push('/myDoctor');
    },
    wodefuwubao() {
      this.$router.push('/oldService');
    },
    wodeshoucang() {
      // 跳转到收藏页面
      this.$router.push({name: 'collect'});
    },
    getUserInfo() {
      this.axios.get(`http://localhost:10086/api/user/user/getUserInfo`).then(res => {
        if (res.data.code == 200) {
          this.user = res.data.data
          console.log(this.user)
        } else {
          console.log(res);
        }
      })
    },
    tiaozhuan(activeName) {
      switch (activeName) {
        case 0:
          this.$router.push({name: 'index'});
          break;
        case 1:
          this.$router.push({name: 'message'});
          break;
        default:
          break;
      }
    }
  }
}

</script>

<style>
/* 修改激活项的文本和图标颜色 */
.van-tabbar-item--active {
  color: #1989fa; /* 这里可以修改为你想要的激活颜色 */
}

.page-header {
  width: 100%;
  margin-bottom: 10px;
}

.message-page {
  padding: 0 20px;
}
</style>